<template>
  <div>
    <component :is="getRender" @testEmit="childEmit">
      <template #[slotName]></template>
      <template #b>
        <!-- <div
          class="draggable"
          :style="{ top: top + 'px', left: left + 'px' }"
          @mousedown="dragStart"
          @mouseup="dragEnd"
          @mousemove="draggin1"
        >
          拖动我
        </div> -->
        <!-- <table-row-col /> -->
        <!-- <temp /> -->
        <!-- <style-html
          :styles="{ width: '100px', height: '100px',border: '1px solid red' }"
          content="hello"
          pic="https://fanyi-cdn.cdn.bcebos.com/static/cat/asset/logo.2481f256.png"
        /> -->

        <!-- <table-vue /> -->
        <!-- <draggable-view /> -->
        <!-- <draggable-views /> -->
        <!-- <draggable-views2 /> -->
        <!-- <StyleHtml v-model="test" />
        {{ test }}1212 -->
      </template>
    </component>
    <!-- <Echartss />
    <ul @mouseleave="onMouseLeave" style="margin: 0; padding: 1px 1px 0 1px; list-style-type: none; width: 500px; background-color: pink;">  
      <li ref="t1" style="display: inline-block; padding: 10px; background-color: #999;" @mouseover.stop="onMouseOver('t1')">1</li>  
      <li ref="t2" style="display: inline-block; padding: 10px; background-color: #999;" @mouseover.stop="onMouseOver('t2')">2</li>  
      <li ref="t3" style="display: inline-block; padding: 10px; background-color: #999;" @mouseover.stop="onMouseOver('t3')">3</li>  
    </ul>  
    <div ref="mask" class="mask" style="width: 100%; height: 10px; position: relative; top: -10px; /* Adjust as needed */ pointer-events: none;"></div> -->
  </div>
</template>
<script>
import ChildSlots from './child-slot.vue'
import getRender from './render'
// import temp from './temp'
// import tableRowCol from './table-colspan-rowspan.vue'
// import StyleHtml from './style.vue'
// import TableVue from './table-vue.vue'
// import DraggableView from './draggable.vue'
import DraggableViews from './draggable1.vue'
// import DraggableViews2 from './draggable2.vue'
import Echartss from './echarts.vue'

export default {
  name: 'ParentSlot',
  components: {
    ChildSlots,
    // temp,
    // tableRowCol,
    // StyleHtml,
    // TableVue,
    // DraggableView,
    DraggableViews,
    // DraggableViews2,
    Echartss,
    getRender
  },
  data() {
    return {
      slots: getRender,
      slotName: 'a',
      top: 0,
      left: 0,
      test: ''
    }
  },
  
  render(createElement) {
    return createElement('div', {}, '你好，我是dev')
    // return createElement('select', {
    //   // 设置 select 元素的值
    //   attrs: {
    //     value: this.selectedOption
    //   },
    //   // 添加 change 事件监听器
    //   on: {
    //     change: (event) => {
    //       this.selectedOption = event.target.value;
    //     }
    //   }
    // },
    // // 使用 createElement 创建 option 子元素
    // this.options.map(option => createElement('option', {
    //   attrs: {
    //     value: option
    //   }
    // }, option)))
  },
  mounted() {
  },
  methods: {
    childEmit(e) {
      console.log(e,'被我发现了')
    },
    onMouseLeave() {  
      console.log('离开');  
      this.$refs.mask.innerText = '空';  
    },  
    onMouseOver(t) {  
      console.log('进来', t);  
      // 使用 this.$refs[t].textContent 来获取 li 的文本内容  
      this.$refs.mask.innerText = this.$refs[t].textContent;  
    },
    dragStart(event) {
      this.dragging = true;
      this.initialX = event.clientX - this.left;
      this.initialY = event.clientY - this.top;
    },
    dragEnd() {
      this.dragging = false;
    },
    draggin1(event) {
      if (this.dragging) {
        this.left = event.clientX - this.initialX;
        this.top = event.clientY - this.initialY;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.draggable {
  position: absolute;
  width: 100px;
  height: 100px;
  cursor: pointer;
  background-color: #42b983;
  color: white;
  text-align: center;
  line-height: 100px;
}
</style>